<template>
  <el-tabs v-model="activeName" class="article-tabs" @tab-change="handleTabChange">
    <el-tab-pane label="推荐" name="recommend">
      <ul v-infinite-scroll="load">
        <ArticleItem @click="handleClickArticle(article._id)" v-for="article in articles" :key="article"
          :title="article.title" :desc="article.desc || article.content" :date="article.publishDate"
          :avatar="article.avatar"></ArticleItem>
      </ul>
    </el-tab-pane>
    <el-tab-pane label="关注" name="follow">关注</el-tab-pane>
    <el-tab-pane label="最新的" name="latest">最新</el-tab-pane>
  </el-tabs>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  name: 'ArticleTabs',
  components: { ArticleItem },
  props: {
    articles: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeName: 'recommend',
    }
  },
  mounted() {
    console.log(this.articles)
  },
  methods: {
    handleTabChange(name) {
      this.$emit('tab-change', name)
    },
    handleClickArticle(id) {
      this.$emit('clickItem', id)
    },
    load() {
      this.$emit('load')
    }
  }
}
</script>

<style lang="scss" scoped>
.article-tabs {
  ul {
    margin: 0;
    padding: 0;
  }
}
</style>
